<template>
  <div class="rangking">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div class="containner" v-for="item in list" :key="item.bvid" @click="toDetail(item.bvid)">
        <div class="left">
          <img :src="item.pic" alt="" />
          <div class="time">{{ item.duration }}</div>
        </div>
        <div class="right">
          <div class="title">{{ item.title }}</div>
          <div class="author">
            <van-icon name="manager-o" />&nbsp;{{ item.owner.name }}
          </div>
          <div class="watchmsg">
            <van-icon name="play-circle-o" />&nbsp;{{ item.stat.view }}
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { getSeller } from "@/api/index.js";
import { onMounted, ref } from "@vue/runtime-core";
// import { useRouter } from "vue-router";

const list = ref([]);
// const router = useRouter()
const loading = ref(false);
const finished = ref(false);
const views = ref([])

onMounted(async () => {
  getSeller().then((res) => {
    // console.log(res.data);
    views.value = res.data.archives;
    loading.value = false;
    finished.value = true
    list.value = views.value.slice(0, 16)
  });
});
const onLoad = () => {
  loading.value = false;
  if(list.value.length >= 16) {
    finished.value = true
  }
};
//详情页
const toDetail = (bvid) => {
    // router.push({path:'/detail', query:{ Bvid: bvid } })
    let href = `/detail?Bvid=${bvid}`
    window.location.href = href
}
</script>

<style scoped>
.rangking{
  margin-bottom: 50px;
  width: calc(100vw - 40px);
}
.containner {
  height: 100px;
  width: calc(100vw - 40px);
  display: flex;
  margin: 10px 0 0;
  border-bottom: 1px solid #aaa;
}
.left img {
  width: 170px;
  height: 95px;
  border-radius: 5px;
}
.time {
  position: relative;
  float: right;
  margin-top: -24px;
  color: #fff;
  margin-right: 15px;
}
.right {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 10px;
}
.title {
  width: 170px;
  height: 50px;
  font-size: 18px;
  word-wrap: break-word;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap;  */
}
.author,
.watchmsg {
  color: #aaa;
}
</style>